<template>
  <div>
    <div class="aside-left" ref="asideleft">
      <ul>
        <li v-for="(item,index) in list" @click="handleSelectClick(index)">
          <a :class="{select:item.path == $route.path}">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="item.icon"></use>
            </svg>
            <span>{{item.name}}</span>
            <i></i>
          </a>
        </li>
      </ul>
    </div>

    <router-view></router-view>


  </div>
</template>

<script>
  export default {
    name: 'MaterialLeft',
    components: {},
    props: ["height"],
    data() {
      return {
        list: [
          {name: '已发文章', path: '/Material/SendArticle', icon: '#icon-file-text'},
          {name: '图片素材', path: '/Material/Image', icon: '#icon-folder'},
          {name: '回收站', path: '/Material/Recovery', icon: '#icon-trash'}],

      }
    },
    created() {
    },
    methods: {
      handleSelectClick(index) {


        this.$router.push({path: this.list[index].path});


      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/style.scss";

  .aside-left {
    position: absolute;
    top: 83px;
    left: 0px;
    bottom: 0px;
    width: 220px;
    z-index: 10;
    border-right: 1px solid $listborderColor;
    li {
      border-bottom: 1px solid $borderbottomColor;
      line-height: 60px;
      cursor: pointer;
      a {
        padding-left: 18px;
        font-size: $fs14;
        color: $listTitleColor;
        .icon {
          vertical-align: middle;
          margin: -4px 7px 0px 0px;
          width: 20px;
          height: 20px;
        }
      }
    }
    .select {
      color: $borderColor;
    }
    .new-folder {
      margin: 30px auto 0px;
      width: 120px;
      line-height: 40px;
      text-align: center;
      border-radius: 20px;
      border: 1px solid $listborderColor;
      color: $listTitleColor;
    }
  }
</style>
